﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>积分商城</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="Brave Chen">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- <link rel="stylesheet" href="/shop/templates/cdrt/css/index.css?v=1.1">-->
    <link rel="stylesheet" href="/Content/amazeui/css/amazeui.min.css?v=1.0">
    <link href="/shop/templates/yeshou/css/swiper-3.2.7.min.css" rel="stylesheet" />
    <link href="//cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet">
    <script>
        function jump(url) {
            self.location = url;
        }
    </script>
    <style type="text/css">
        .cart {
            display: inline-block;
            position: relative;
            top: 10px;
            width: 23px;
            height: 23.5px;
            background: url(templates/cdrt/images/cart_icon.png) no-repeat;
            -webkit-background-size: 23px 23.5px;
            -moz-background-size: 23px 23.5px;
            background-size: 23px 23.5px;
            text-decoration: none;
            float: right;
        }

        html {
            font-family: 'Microsoft YaHei';
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        ol, ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #444;
        }

        .header {
            height: 45px;
            background-color: #0059a9;
            padding: 0 15px;
            line-height: 45px;
        }

            .header .bar {
                text-align: center;
                font-size: 19px;
                color: #fff;
                position: relative;
                height: 45px;
            }

                .header .bar .callback {
                    display: block;
                    position: absolute;
                    height: 12px;
                    width: 12px;
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
                    border: 2px solid #fff;
                    top: 12px;
                    border-right-color: #0059a9;
                    border-top-color: #0059a9;
                }

        .slide-bar {
            height: 210px;
            width: 100%;
        }

            .slide-bar img {
                height: 210px;
                width: 100%;
            }

        .main {
            background-color: #fff;
            margin: 10px 0 0;
            padding: 0 10px;
        }

        .title-list {
            width: 100%;
            overflow: hidden;
            height: 45px;
            position: relative;
            margin: 0 auto 10px;
        }

            .title-list ul {
                width: 1000px;
                height: 44px;
                position: absolute;
                left: 0;
                top: 0;
                border-bottom: 1px solid #e5e5e5;
            }

                .title-list ul li {
                    float: left;
                    margin: 0 20px 0 0;
                    height: 44px;
                    line-height: 44px;
                    font-size: 16px;
                    border-bottom: 1px solid #e5e5e5;
                }

                    .title-list ul li.selected {
                        color: #0059a9;
                        border-bottom-color: #0059a9;
                    }

        .goods-list, .goods-list ul {
            width: 100%;
            overflow: hidden;
        }

            .goods-list ul li {
                width: 120px;
                height: 250px;
                overflow: hidden;
                float: left;
                margin: 0 3% 0 0;
            }

        @media screen and (min-width: 330px) {
            .goods-list ul li {
                margin: 0 15px;
            }
        }

        @media screen and (min-width: 390px) {
            .goods-list ul li {
                margin: 0 25px;
            }
        }

        .goods-list ul li .img-wapper {
            display: block;
            width: 120px;
            height: 169px;
            border: 1px solid #e1e1e1;
        }

        .goods-list ul li img {
            width: 120px;
            height: 169px;
        }

        .goods-list .info {
            font-size: 13px;
            line-height: 18px;
            padding: 6px 0 0;
        }

            .goods-list .info a {
                display: block;
                height: 18px;
                overflow: hidden;
                margin: 0 0 6px;
            }

            .goods-list .info span {
                line-height: 15px;
                color: #0059a9;
                font-weight: bold;
            }

        .hidden {
            display: none;
        }

        .list_msg {
            position: relative;
            margin: 0 10px;
            padding: 10px;
            background: #f7f7f7;
            border: 1px #e4e4e4 solid;
            text-align: left;
            overflow: hidden;
        }

            .list_msg ul {
                line-height: 1.5em;
            }

        .list_with_img {
            padding: 10px 10px 10px 92px;
        }

            .list_with_img img {
                position: absolute;
                left: 10px;
                top: 10px;
                width: 100px;
                height: 100px;
                border: 1px solid #e4e4e4;
            }

        .list_tex {
            padding: 0 10px 0px 10px;
            text-align: left;
            line-height: 22px;
            color: #4b4c4d;
        }

            .list_tex span {
                color: #d71249;
                font-size: 14px;
                text-align: left;
                float: left;
                margin-left: 20px;
                margin-top: 0;
            }

            .list_tex font {
                font-size: 16px;
                font-weight: 600;
                display: block;
            }

            .list_tex .yd {
                color: #005aa9;
                font-weight: 100;
                font-size: 14px;
            }

            .list_tex .txt_blue {
                color: #0059a9;
            }

            .list_tex .txt_red {
                color: #d5124a;
            }

            .list_tex strong {
                color: #000000;
                font-size: 16px;
                font-weight: normal;
            }

        .cart i {
            width: 16px;
            height: 16px;
            line-height: 16px;
            border-radius: 40px;
            background-color: #F91F06;
            color: #fff;
            font-style: normal;
            font-weight: bold;
            font-size: 10px;
            text-align: center;
            position: absolute;
            top: -3px;
            right: -5px;
        }

        .navbar span {
            width: 10px; /* height: 2px; */
            height: 1px;
            margin-bottom: 5px;
            background-color: #fff;
            overflow: hidden;
            display: block;
        }
    </style>
    <script>
        function getselected(i) {
            var j = '1';
            if (i == '1') {
                j = '2';
            }
            $('#li' + i).addClass("selected");
            $('#goodslist' + i).removeClass("hidden");
            $('#li' + j).removeClass("selected");
            $('#goodslist' + j).addClass("hidden");
        }
    </script>
</head>
<body>
    <!--<div  style="background: #EBECEA; color: #EBECEA">
        <div class="fr">
            <a class="cart" href="{$carturl}&rtn=reward"><i id="count"></i></a>
        </div>
    </div>-->
    <!--<div style="background: #EBECEA; color: #EBECEA;">
    </div>-->
    <div class="slide-bar">
        <!--焦点图-->
        <section data-am-widget="slider" class="am-slider am-slider-default am-slider-white"
                 data-am-slider='{"directionNav":false}'>
            <ul class="am-slides">
                <vt:function var="hdp" method="getHdp" type="$this" rows="10" />
                <vt:foreach from="$hdp" item="p" index="i">
                    <li>
                        <img src="{$p.bannerPicUrl}" onclick="jump('{$p.bannerLinkUrl}')">
                        <div class="am-slider-desc">{$p.Remark}</div>
                    </li>
                </vt:foreach>
            </ul>
        </section>
        <!--<div class="swiper-container">
          <div class="swiper-wrapper">
            <vt:function var="hdp" method="getHdp" type="$this" rows="10" />
            <vt:foreach from="$hdp" item="p" index="i">
              <div class="swiper-slide">
                <a href="{$p.bannerLinkUrl}">
                  <img src="{$p.bannerPicUrl}" alt="" />
                </a>
              </div>
            </vt:foreach>
            <div class="swiper-pagination">
            </div>
          </div>
        </div>-->
        <div class="main">
            <div class="title-list">
                <ul>
                    <li id="li1" onclick="getselected('1');" class="selected">全部商品</li>
                    <li id="li2" onclick="getselected('2');">最新上架</li>
                </ul>
            </div>
            <!--<div id="goodslist1" class="goods-list">
            <ul>-->
            <vt:function var="hdp" method="GetRewardProducts" type="$this" rows="4" />
            <vt:foreach from="$hdp" item="p" index="i">
                <!--<li>-->
                <div id="goodslist1" class="list_msg list_with_img" style="height:120px;margin-top:10px;font-size:12px;!important">
                    <a href="{$p.link_url}">
                        <img style="margin-top:0px" src="{$p.productpic}" alt="" />
                        <p class="list_tex " style="margin-top:0px;margin-left:20px;font-size:14px;">
                            {$p.productName}
                        </p>
                        <p class="list_tex">
                            <span style="text-align: left;">{$p.salePrice}积分</span>
                        </p>
                        <p class="list_tex">
                            <span style="text-align: left;color:Black">{$p.shortDesc length="120"}</span>
                        </p>
                    </a>
                </div>
            </vt:foreach>
            <!--<a href="{$p.link_url}" class="img-wapper">
              <img src="{$p.productpic}" alt="" />
            </a>
            <div class="info">
              <a href="{$p.link_url}">{$p.productName}</a>
              <span>{$p.salePrice}积分</span>
            </div>-->
            <!--</li>-->
            <!--</ul>-->
            <!--</div>-->
            <!--<div id="goodslist2" class="goods-list hidden">
            <ul>-->
            <vt:function var="hdp" method="GetLatestRewardProducts" type="$this" rows="4" />
            <vt:foreach from="$hdp" item="p" index="i">
                <div id="goodslist2" class="list_msg list_with_img" style="height:120px;margin-top:10px;font-size:12px;display:none !important">
                    <a href="{$p.link_url}">
                        <img style="top:16px;" src="{$p.productpic}" alt="" />
                        <p class="list_tex " style="margin-left:20px;font-size:14px;">
                            {$p.productName}
                        </p>
                        <p class="list_tex">
                            <span style="text-align: left;">{$p.salePrice}积分</span>
                        </p>
                        <p class="list_tex">
                            <span style="text-align: left;">{$p.shortDesc}</span>
                        </p>
                    </a>
                </div>
                <!--<li>
                    <a href="{$p.link_url}" class="img-wapper">
                        <img src="{$p.productpic}" alt="" />
                    </a>
                    <div class="info">
                        <a href="{$p.link_url}">{$p.productName}</a>
                        <span>{$p.salePrice}积分</span>
                    </div>
                </li>-->
            </vt:foreach>
            <!-- </ul>-->
            <!--</div>-->
        </div>
        <footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }">
            <div class="am-footer-switch">
                <a class="am-footer-desktop" href="javascript:scroll(0,0)">
                    返回顶部
                </a>
                <span class="am-footer-divider"> | </span>
                <a class="am-footer-desktop" href="">
                    返回首页
                </a>
            </div>
            <div class="am-footer-miscs ">
                <p>
                    {$shopconfig.copyright}
                </p>
            </div>
        </footer>
    </div>
    <script src="/Content/jquery/jquery-1.12.1.min.js"></script>
    <script src="/Content/amazeui/js/amazeui.min.js"></script>
</body>
</html>
